import { useRef, useState } from 'react';
import { Space, Popconfirm, Button } from 'antd';
import ProTableComp, { type ColumnsType, type ToolsType } from '@/components/ProTableComp';
import FormModal from './FormModal';
import { goodsList } from '@/api/modules/goods';
import { getMerchantList } from '@/api/modules/common';

import "./index.less";

const fieldNames = { label: 'name', value: 'id', groupLabel: 'name' };

const Page = () => {
	const actionRef: any = useRef();
	const modalRef: any = useRef();

	const handleEdit = (record: any) => {
		modalRef.current.showDetail(record.id, record.game_id);
	};
	const [columns, setColumns]: any = useState([]);

	const getColumns = ({
        allUserRes = {},
		merchantRes = {},
	}: any): ColumnsType[] => {
		return [{
			title: '商户',
			dataIndex: 'recovery_sn',
			hideTable: true,
			valueType: 'select',
			options: merchantRes.data || [],
			formProps: { fieldNames },
		}, {
			title: '商品状态',
			dataIndex: 'account',
			hideTable: true,
			valueType: 'text',
		}, {
			title: '验号状态',
			dataIndex: 'mobile',
			hideTable: true,
			valueType: 'text',
		}, {
			title: '商品名称',
			dataIndex: 'account_status',
			hideTable: true,
			valueType: 'text',
		}, {
			title: '价格',
			dataIndex: 'pay_type',
			hideTable: true,
			valueType: 'moneyRange',
		}, {
			title: '自营编码',
			dataIndex: 'status',
			hideTable: true,
			valueType: 'text',
		}, {
			title: '外部商品编码',
			dataIndex: 'type',
			hideTable: true,
			valueType: 'text',
		}, {
			title: '商户商品编码',
			dataIndex: 'recovery_staff_id',
			hideTable: true,
			valueType: 'text',
			options: allUserRes.data,
		}, {
			title: '销售状态',
			dataIndex: 'bind_id',
			hideTable: true,
			valueType: 'text',
		},
			
		// 列表部分
		{
			title: 'ID',
			dataIndex: 'id',
			width: 50,
			align: 'center',
		}, {
			title: '商户商品编码',
			dataIndex: 'game',
			width: 180,
		}, {
			title: '销售状态',
			dataIndex: 'pay_type',
			width: 180,
		}, {
			title: '商品名称',
			dataIndex: 'type',
			width: 180,
		}, {
			title: '外部商品编码',
			dataIndex: 'recovery_time',
			width: 180,
		}, {
			title: '商户',
			dataIndex: 'recovery_staff',
			width: 180,
		}, {
			title: '商品状态',
			dataIndex: 'bind_name',
			width: 180,
		}, {
			title: '验号状态',
			dataIndex: 'recovery_sn',
			width: 180,
		}, {
			title: '描述',
			dataIndex: 'recovery_channel',
			width: 180,
		}, {
			title: '价格',
			dataIndex: 'payment_time',
			width: 180,
		}, {
			title: '封面',
			dataIndex: 'account_status',
			width: 180,
		}, {
			title: '入库时间',
			dataIndex: 'status',
			width: 180,
		}, {
			title: '后台下架时间/销售时间',
			dataIndex: 'pay_for',
			width: '260',
		}, {
			title: '游戏名称',
			dataIndex: 'account',
			width: 180,
		}, {
			title: '游戏属性',
			dataIndex: 'mobile',
		}, {
			title: '等级',
			dataIndex: 'recovery_price',
			width: 180,
		}, {
			title: '游戏区服',
			dataIndex: 'sale_price',
			width: 180,
		}, {
			title: '自营编码',
			dataIndex: 'account_feature',
			width: 180,
		}, {
			title: '创建时间',
			dataIndex: 'account_tags',
			width: 180,
		}, {
			title: '操作',
			dataIndex: 'h',
			hideSearch: true,
			width: 180,
			fixed: 'right',
			render: (_, record) => (
				<Space>
					<Button onClick={() => handleEdit(record)} type="primary">编辑</Button>
					<Popconfirm
						title="确定删除吗?"
						onConfirm={() => {
							console.log(record);
						}}
					/>
				</Space>
			)
		}];
	};
	const tools: ToolsType[] = [
		{
			type: 'button',
			text: '批量改价',
			compProps: { type: 'primary' },
			onClick: () => {}
		},
		{
			type: 'button',
			text: '批量操作',
			compProps: { type: 'primary' },
		},
		{
			type: 'button',
			text: '图片上传',
			compProps: { type: 'primary' },
		},
		{
			type: 'button',
			text: '商品置顶',
			compProps: { type: 'primary' },
		},
		{
			type: 'button',
			text: '批量手动上架',
			compProps: { type: 'primary' },
		},
		{
			type: 'button',
			text: '批量编辑游戏属性',
			compProps: { type: 'primary' },
		},
		{
			type: 'button',
			text: '批量验号截图',
			compProps: { type: 'primary' },
		},
	];
	const gameLoad = async (gameRes: any) => {
		const asyncArr = [gameRes, getMerchantList()];
		const [allGameRes, merchantRes] = await Promise.all(asyncArr);
		setColumns(getColumns({ allGameRes, merchantRes }));
		modalRef.current.setOptionsMap((pre: any) => ({ ...pre, allGameRes, merchantRes }));
	};

	return (
		<div className="card content-box goods-list">
			<ProTableComp
				actionRef={actionRef}
				tableName="商品列表"
				request={goodsList}
				columns={!columns.length ? getColumns({}) : columns}
				tools={tools}
				isShowGameAll={true}
				gameLoad={gameLoad}
			/>
			<FormModal ref={modalRef} />
		</div>
	);
};

export default Page;
